<template>
	<view class="emoji">
		<view class="emoji_item" v-for="item,index in emojiList" :key="index" @click="sendEmoji(item,index)">
			<image :src="item.emoji" class="emoji_image"></image>
		</view>
	</view>
</template>

<script>
	
	export default {
		props:{
			emojiList:{
				type:Array,
				default:()=>[]
			}
		},
		data() {
			return {
			}
		},
		methods:{
			sendEmoji(item){
				this.$emit('sendEmoji',item)
			}
		}
	}
</script>

<style scoped lang="scss">
	.emoji {
		display: grid;
		grid-template-columns: repeat(auto-fill,60rpx);
		grid-gap: 10px;
		overflow-y: auto;
		padding: 10rpx 20rpx;	
		height: 300rpx;

		&::after {
			content: "";
			flex: auto;
		}
	}

	.emoji_image {
		width: 60rpx;
		height: 60rpx;
		display: block;
	}
</style>